<template>
	<view class="personal">
		<view class="personal-header" @tap="headerClickHandler">
			<view class="personal-header-left">
				<image v-if="hasLogin && userInfo.avatar_file && userInfo.avatar_file.url" :src="userInfo.avatar_file.url" mode="aspectFill"></image>
				<image v-else src="/static/images/user-default.jpg"></image>
				<view class="login" v-if="!hasLogin" data-type="login">
					<text>点击登录</text>
				</view>
				<view class="base-info" v-else>
					<text class="nickname">{{ userInfo.nickname || userInfo.username || userInfo.mobile }}</text>
					<uni-dateformat class="register-time" :date="userInfo.register_date" format="yyyy/MM/dd" :threshold="[60000, 3600000 * 24 * 30]"></uni-dateformat>
				</view>
			</view>

			<view class="personal-header-right">
				<text class="iconfont icon-right"></text>
			</view>
			<view class="background">
				<image v-if="hasLogin && userInfo.avatar_file && userInfo.avatar_file.url" :src="userInfo.avatar_file.url" mode="aspectFill"></image>
				<image v-else src="/static/images/user-default.jpg"></image>
			</view>
		</view>

		<view class="personal-content">
			<view class="personal-content-header">
				<text>
					{{ likeCount }}
					<text>获赞</text>
				</text>
				<text>
					{{ commentCount }}
					<text>评论</text>
				</text>
				<text>
					{{ blogCount }}
					<text>发文</text>
				</text>
			</view>
			<view class="personal-content-item" v-for="item in viewItemList" :key="item.content" @click="contentClickHandler(item.type)">
				<text class="iconfont" :class="item.icon"></text>
				<view class="content">
					{{ item.content }}
				</view>
				<text class="iconfont icon-right"></text>
			</view>
		</view>
	</view>
</template>

<script>
import { store, mutations } from '@/uni_modules/uni-id-pages/common/store.js';
import pagesJson from '@/pages.json';
import { tokenExpiredOrErrorHandler } from '@/utils/tool.js';

const blogObj = uniCloud.importObject('blogObj', { customUI: true });
const commentObj = uniCloud.importObject('blog-comment', { customUI: true });
export default {
	data() {
		return {
			viewItemList: [
				{ icon: 'icon-fillin', type: 'content-list', content: '我的长文', url: '', method: 'navigateTo' },
				{ icon: 'icon-good', type: 'like-list', content: '我的点赞', url: '', method: 'navigateTo' },
				{ icon: 'icon-comment', type: 'comment-list', content: '评论过的', url: '', method: 'navigateTo' },
				{ icon: 'icon-file-delete', type: 'about', content: '关于', url: '', method: 'navigateTo' },
				{ icon: 'icon-chat', type: 'feedback', content: '意见反馈', url: '', method: 'navigateTo' },
				{ icon: 'icon-Logout', type: 'logout', content: '退出登录', url: '', method: 'reLaunch' }
			],
			likeCount: 0,
			blogCount: 0,
			commentCount: 0
		};
	},
	onLoad() {
	},
	onShow(){
		this.hasLogin && this.userInfo._id && this.initData();
	},
	methods: {
		onfocus() {
			this.$refs.editComment.onFocus();
		},
		initData() {
			return Promise.all([blogObj.getLikesCount(), blogObj.getArticleCount(), commentObj.queryCommentCount()])
				.then((res) => {
					this.likeCount = res[0];
					this.blogCount = res[1];
					this.commentCount = res[2];
				})
				.catch((e) => {
					return uni.showToast({
						title: e.message,
						icon: 'none'
					});
				});
		},
		toLogin() {
			uni.redirectTo({
				url: '/uni_modules/uni-id-pages/pages/login/login-withpwd'
			});
		},
		contentClickHandler(type) {
			if (type === 'logout') {
				this.checkLogin() &&
					uni.showModal({
						title: this.getLanguageInfo('logout').logoutConfirm,
						success: async (res) => {
							if (res.confirm) {
								await this.logout();
							}
							return;
						}
					});
			}

			if (type.includes('list')) {
				type = type.split('-')[0];
				const url = `/pages-personal/list/list?type=${type}`;
				this.checkLogin() && uni.navigateTo({ url });
			}

			if (type === 'feedback') {
				const url = '/uni_modules/uni-feedback/pages/opendb-feedback/opendb-feedback';
				this.checkLogin() && uni.navigateTo({ url });
			}
		},
		headerClickHandler() {
			const loginPage = '/' + pagesJson.uniIdRouter.loginPage ?? '/uni_modules/uni-id-pages/pages/login/login-withpwd';
			// const redirectRoute = this.$mp.page.route
			let pages = getCurrentPages();
			let currentPage = pages[pages.length - 1];
			/*  #ifdef  H5  */
			const route = currentPage.__page__.route;
			/*  #endif  */
			/*  #ifdef  MP-WEIXIN  */
			const route = currentPage.route;
			/*  #endif  */
			if (this.hasLogin) {
				uni.navigateTo({
					url: '/uni_modules/uni-id-pages/pages/userinfo/userinfo'
				});
			} else {
				uni.navigateTo({
					url: `${loginPage}?uniIdRedirectUrl=/${route}`
				});
			}
		},
		checkLogin() {
			if (!this.hasLogin) {
				uni.showToast({
					icon: 'none',
					title: this.getLanguageInfo('status').noLogin
				});
				return false;
			}
			return true;
		},
		async logout() {
			await mutations.logout();
			this.likeCount = 0
			this.commentCount = 0
			this.blogCount = 0
		}
	},
	computed: {
		userInfo() {
			return store.userInfo;
		},
		hasLogin() {
			return store.hasLogin;
		},
		getLanguageInfo() {
			return this.$t;
		}
	}
};
</script>

<style lang="scss"></style>
